<template>
<view class="body">
    <view class="search-bar">
        <view class="search-row">
            <view class="input-box">
                <image src="/static/images/search.png"></image>
                <input placeholder="请输入城市名称查询" confirm-type="search" @input="inputTap" @confirm="confirmTap" :value="keywords">
            </view>
        </view>
    </view>
    <view v-for="(item, index) in city" :key="index" class="list">
        <view class="city-key" v-if="item.list[0]" :id="item.key" :key="index">
            {{item.key}}
        </view>
        <view class="city-list">
            <view v-for="(city, index2) in item.list" :key="index2" class="city" @tap="chouseCity" :data-citycode="city.citycode" :data-cityname="city.cityname">
                {{city.cityname}}
            </view>
        </view>
    </view>
    <view class="navi flex col center">
        <view v-for="(item, index) in city" :key="index" class="key-list" @tap="scrollTo" :data-id="item.key" v-if="item.list[0]">
            {{item.key}}
        </view>
    </view>
</view>
</template>

<script>
import util from "../../../../utils/util";
const app = getApp();
var cityList = [];

export default {
  data() {
    return {
      city: [],
      keywords: "",
      citycode: "",
      cityname: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.index = options.type;
    util.getUrl(app.globalData.url).then(res => {
      this.getCityInfo();
    });
  },
  onShareAppMessage: function () {},
  methods: {
    getCityInfo() {
      let data = {
        action: "huodong",
        type: "city"
      };

      if (this.index == 0) {
        data.chouse = 1;
      } else data.chouse = 2;

      util.request("huodong.php", data, "POST").then(res => {
        if (res.data.state == 1) {
          let cityKey = [];

          for (let i = 65; i <= 90; i++) cityKey.push({
            key: String.fromCodePoint(i),
            list: []
          });

          cityKey.forEach(item => item.list = res.data.data.city[item.key]);
          cityList = JSON.parse(JSON.stringify(cityKey));
          this.setData({
            city: cityKey
          });
        }
      });
    },

    scrollTo(e) {
      let id = util.getValue("id", e);
      uni.pageScrollTo({
        duration: 300,
        selector: `#${id}`
      });
    },

    chouseCity(e) {
      let citycode = util.getValue("citycode", e);
      let cityname = util.getValue("cityname", e);
      let curPages = getCurrentPages();
      curPages[curPages.length - 2].setData({
        citycode,
        cityname
      });
      uni.navigateBack({
        delta: 1
      });
    },

    inputTap(e) {
      let city = [{
        list: []
      }];
      if (e.detail.value) cityList.forEach(_city => {
        if (_city.list) Object.assign(city[0].list, _city.list.filter(item => item.cityname.includes(e.detail.value)));
      });else city = cityList;
      this.setData({
        city
      });
    },

    confirmTap() {
      console.log("占位：函数 confirmTap 未声明");
    }

  }
};
</script>
<style>
.body {
    position: relative;
    font-size: 28rpx;
    color: #232323;
}

.city-key {
    height: 38rpx;
    padding-left: 40rpx;
    margin-bottom: 20rpx;
    line-height: 38rpx;
    background-color: #F7F7F7;
}

.city-list {
    margin: 0 40rpx;
}

.city {
    padding-bottom: 17rpx;
    margin-bottom: 19rpx;
    border-bottom: 2rpx solid #F0F0F0;
}

.city-list .city:last-child {
    border-bottom: 0;
}

.navi {
    position: fixed;
    right: 15rpx;
    top: 140rpx;
    font-size: 25rpx;
    width: 60rpx;
    line-height: 37rpx;
    text-align: center;
    color: #ff7e2d;
    z-index: 1;
}

.key-list {
    padding: 5rpx;
}


/* 搜索城市 */

.search-bar {
    width: 100%;
    height: 110rpx;
    line-height: 100rpx;
    /* margin-top: -100rpx; */
    top: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* background: rgb(59, 63, 68); */
    padding: 20rpx;
    position: relative;
    /* border-bottom: 15rpx solid #eee; */
}

.search-row {
    display: flex;
    align-items: center;
}

.search-row text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 40rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    margin-left: 30rpx;
}

.input-box {
    height: 62rpx;
    background: rgba(238, 238, 238, 1);
    opacity: 1;
    border-radius: 32rpx;
    padding: 5rpx 30rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    flex: 1;
}

.input-box image {
    width: 30rpx;
    height: 30rpx;
    margin: 0 10rpx;
}

.input-box input {
    flex: 1;
    height: 62rpx;
}
</style>